/**
 * 博客的Header
 */

import { Col, Spin, Menu, Row, Dropdown } from 'antd';
import React, { useEffect, useState } from 'react';
import { IRouteComponentProps } from 'umi';
import { useViewport } from '@/provider/viewport_context';
import { PicRightOutlined } from '@ant-design/icons';
import './basic_header_style.less';
import { Link } from 'umi';
import './phone_style/phone_basic_header.less';
import { CategoryType } from '@/type/category';
import { BlogGetCategoryApi } from '@/service/blog/blog_category_api';
import {
  pushArticleByParma,
  pushBlogHome,
} from '@/pages/blog/article/article_list';

export const BlocBasicHeader = (props: { config: IRouteComponentProps }) => {
  const { width } = useViewport();
  const [category, setCategoryList] = useState<CategoryType[]>([]);
  useEffect(() => {
    BlogGetCategoryApi().then((model) => {
      if (model.success) {
        const categoryList = model.data!.data;
        categoryList.unshift({
          id: -1,
          category_route: '/',
          category_name: '首页',
        });
        setCategoryList(categoryList);
      }
    });
  }, []);
  let showItems: Array<CategoryType> = [];
  let hiddenItems: Array<CategoryType> = [];
  // 分类加载loading
  if (category.length === 0) {
    return (
      <div className="header_dropdown_loading">
        <Spin />
      </div>
    );
  }

  if (category.length <= 6) {
    showItems = category;
  } else {
    showItems = category.slice(0, 6);
    hiddenItems = category.slice(6);
  }
  const hiddenMenu = (
    <Menu>
      {hiddenItems.map((item) => (
        <Menu.Item key={item.id}>
          <a onClick={() => pushArticleByCategoryId(item.id)}>
            {item.category_name}
          </a>
        </Menu.Item>
      ))}
    </Menu>
  );

  // 根据分类id跳转
  const pushArticleByCategoryId = (id: number) => {
    if (id === -1) {
      pushBlogHome();
    } else {
      pushArticleByParma({
        category_id: id,
      });
    }
  };

  // Phone
  if (width <= 1024) {
    const allMenu = (
      <Menu>
        {category.map((item) => (
          <Menu.Item key={item.id}>
            <a
              className="phone_header_menu_item"
              onClick={() => pushArticleByCategoryId(item.id)}
            >
              {item.category_name}
            </a>
          </Menu.Item>
        ))}
      </Menu>
    );
    return (
      <Dropdown overlay={allMenu}>
        <div className="phone_header_dropdown">
          <PicRightOutlined />
        </div>
      </Dropdown>
    );
  }

  // PC
  return (
    <div className="header_main_div">
      <Row gutter={16}>
        {showItems.map((item, index) => (
          <Col className="gutter-row" key={item.id}>
            <a
              className="header_menu_item"
              onClick={() => pushArticleByCategoryId(item.id)}
            >
              {item.category_name}
            </a>
          </Col>
        ))}
        {hiddenItems.length === 0 ? (
          <></>
        ) : (
          <Dropdown overlay={hiddenMenu}>
            <Col className="gutter-row">
              <div className="header_menu_item">更多</div>
            </Col>
          </Dropdown>
        )}
      </Row>
    </div>
  );
};
